<style type="text/css">
    .hidden {
        display: none;
    }
</style>

<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">关于我们</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a th:href="@{admin}">首页</a></li>
                    <li class="breadcrumb-item active">网站管理</li>
                    <li class="breadcrumb-item active">关于我们</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<!-- Main content -->
<section class="content">
    <div class="card card-info p-3">
        <form id="aboutForm" class="row">
            <input id="aboutContent" type="hidden" name="content" th:value="${bizAboutUs?.content}">
            <input name="id" type="hidden" th:value="${bizAboutUs?.id}" >
            <div class="col-lg-4 p-3" style="border: 1px solid #ddd;border-radius: 4px;">
                <div class="form-group col-xs-12">
                    <label class="control-label label-four">关于我们封面:</label>
                    <div class="input-group">
                        <input type="text" class="form-control" name="coverImage" id="coverImage"
                               th:value="${bizAboutUs?.coverImage}"
                               placeholder="关于我们封面地址">
                        <div id="upload-img-btn" class="btn btn-default input-group-btn" style="min-width: 50px">
                            <i class="fas fa-cloud-upload-alt"></i>
                        </div>
                    </div>
                </div>
                <div id="upload-cover-content" class="form-group col-md-12 hidden">
                    <div class="upload-item">
                        <p class="upload-title">封面图</p>
                        <p class="upload-file"><i class="fa fa-cloud-upload fz-70"></i></p>
                        <p class="upload-btns"><a type="button"
                                                  class="btn btn-sm btn-block btn-info coverUploader">上传</a>
                        </p></div>
                </div>
            </div>
            <div class="col-lg-8">
                <div class="form-group">
                    <textarea id="aboutField" th:text="${bizAboutUs?.content}"></textarea>
                </div>
            </div>
            <div class="col-lg-8">
                <div class="form-group mt-4">
                    <div class="row">
                        <button type="button"
                                class="btn btn-primary btn-lg col-md-4 offset-1"
                                onclick="addOrUpdateAbout()">提交
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</section>
<script th:src="@{admin/plugins/ckeditor4/ckeditor.js}"></script>
<script>
    if (CKEDITOR.env.ie && CKEDITOR.env.version < 9)
        CKEDITOR.tools.enableHtml5Elements(document);

    CKEDITOR.config.height = 1000;
    CKEDITOR.config.width = 'auto';
    CKEDITOR.replace('aboutField')
</script>
<script>

    $(function () {
        $("#upload-img-btn").click(function () {
            $('#upload-cover-content').toggle()
            $(".coverUploader").upload({
                server: '[[@{/attachment/upload}]]',
                swf: '/admin/img/Uploader.swf',
                imgAccept: true
            }, function (url, picker) {
                $("#coverImage").val(url);
                echoGtUploadResMethd(url, picker);
            });
        })
    })

    function addOrUpdateAbout() {
        var content = CKEDITOR.instances.aboutField.getData();
        if (content) {
            $("#aboutContent").val(content);
            Core.confirm("确认保存信息？", function () {
                Core.postAjax("/aboutus/add", $("#aboutForm").serialize(), function (data) {
                    if (data.status === 200) {
                        CKEDITOR.instances.aboutField.setData('');
                        Core.load("#content", "aboutus/add");
                    }
                    layer.msg(data.msg)
                })
            })
        } else {
            layer.msg("请输入关于我们展示内容！")
            return false;
        }
    }

</script>
